<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="author" content="Lei Shi">
		<meta http-equiv="Cache-Control" content="o-transform">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta name="csrf-token" content="1483780974##87f89328c5616669f00302a263fe9061bb852818">
		<title>智慧教学平台</title>
		<meta content="实验楼课程分为基础课和项目课，内容涵盖了Linux、Python、Java、C语言、Ruby、Android、IOS开发、大数据、信息安全等IT技术领域。" name="description">
		<meta content="实验楼课程,IT培训课程,IT实训课程,IT在线课程,all" name="keywords">
		<meta content="" name="author">
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="../static/font-awesome//4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="../static/highlight.js/9.8.0/monokai-sublime.min.css">
		<link rel="stylesheet" href="../app/css/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="../app/css/libs/katex/0.6.0/katex.min.css">
		<link rel="stylesheet" href="../app/css/libs/videojs/5.11.7/video-js.min.css">
		<link rel="stylesheet" href="../app/css/dest/styles.css?=2016121272249">
		<link rel="stylesheet" href="../app/css/show1.css" />
		<link rel="stylesheet" href="../restatic/js/libs/marked/katex/katex.min.css">
		<link rel="stylesheet" href="../app/css/show.css" />

		<!--<link rel="stylesheet" type="text/css" href="../../css/index.css" />-->

		<link rel="stylesheet" type="text/css" href="../../bootstrap/css/bootstrap-theme.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/muke.css">

		<script src="../../js/vue.min.js"></script>
		<!--<script src="../../js/index.js"></script>-->
		<script src="../../js/axios.min.js"></script>

		<script  src="../../js/elementui/index.js"></script>
		<link rel="stylesheet" href="../../js/elementui/index.css">
	</head>

	<body>
		<!-- 顶部 -->
		<div class="width100 float_l" style="margin-top: -70px;" id="bt">
			<div class="width100 float_l height80 line_hei80">

				<!-- 顶部左边 -->
				<div class="float_l">
					<div class="float_l margin_l20">
						<a href="../../index.html"> <img src="../../img/uiz1.png"></a>
					</div>
					<div class="float_l">
						<ul class="ul_li fon_siz16">
							<li><a class="color_black" href="../courses/index.html">课程</a></li>
							<li><a class="color_black" href="../../department.html">院系</a></li>
							<li><a class="color_black" href="../paths/index.html">名师专栏</a></li>
						</ul>
					</div>
				</div>

				<!-- 顶部右边 -->
				<div class="float_r">
					<div class="float_l top_input">
						<input class="posi_relative" type="text" v-model="query" placeholder="请输入想搜索的内容...">
						<img class="img_sousuo bianshou" src="../../img/uiz4.png" @click="search()">
					</div>
					<div class="float_l margin_l20">
						<img src="../../img/uiz5.png">
					</div>
					<div class="float_l margin_l35">
						<img src="../../img/uiz6.png">
					</div>
					<div class="float_l margin_l30 margin_r40">
						<a class="color_black" href="../user/13/course.html" v-show="isCenter">个人中心</a>
						<a class="btn btn-default navbar-btn sign-in" href="javascript:void(0)" @click="login()" v-show="isShow">登录</a>
						<el-dropdown>
						<div class="color_black" v-show="isCenter">
							<img :src="userPhoto" width="45px" >
							<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item @click.native="shezhi()">设置</el-dropdown-item>
							<el-dropdown-item @click.native="tuichu()">退出</el-dropdown-item>
						</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>

			</div>
		</div>
	


		<div id="details" class="container layout layout-margin-top">

			<ol class="breadcrumb">
				<li><a href="/student/curricular/courses/index.html">全部课程</a></li>
				
				<li class="active">
					<a href="/courses/1">
						{{courName}}
					</a>
				</li>
			</ol>

			<div class="row">
				<div class="col-md-9 layout-body">
					<div class="content">

						<div class="media-left bootcamp-courses-media">
							<img style="width: 410px;height: 268px" class="media-object" :src="courPicurl">
						</div>

						<div class="media-body bootcamp-courses-body">

							<div class="bootcamp-courses-info">
								<h4 class="media-heading">{{courName}}</h4>

								<div class="msg-desc">
									<h4>开课时间:{{courOpentime}}<!-- 开课时间:2018年12月13日 ~ 2019年01月31日 -->
									</h4>

								</div>

								<div class="msg-desc">
									<h4> 学时安排:{{courClasshour}}<!-- 学时安排:3-5小时每周 -->小时每周</h4>
								</div>
								<div class="msg-desc">
									<h4> 已有{{renshu}}人参加</h4>

									<!-- 	<button @click="add1" class="bootcamp-infobox-buy">{{baoming}}</button> -->
								</div>
								<div class="msg-desc">
									<el-button @click="add1" type="primary">{{baoming}}</el-button>
								</div>

							</div>
							<div class="bootcamp-courses-subscribe">
								<div class="pull-right bootcamp-courses-order">

								</div>
							</div>
						</div>

					</div>

					<div class="content course-infobox">
						<div class="clearfix course-infobox-header">
							<h4 class="pull-left course-infobox-title">

								<span>课程团队</span>

							</h4>
							<div class="pull-right course-infobox-follow" data-follow-url="/courses/1/follow" data-unfollow-url="/courses/1/unfollow">

								<span>浏览量</span>
								<span class="course-infobox-followers">{{courPageview}}人</span>
								<i class="fa fa-star-o" data-next="/login?next=%2Fcourses%2F1"></i>

							</div>
						</div>

						<div class="clearfix course-infobox-body">
							<div class="course-infobox-content">
								<p>{{courContent}}</p>

							</div>

							<div class="course-infobox-progress">

								<div class="course-progress-new"></div>

								<span>（0/17）</span>

							</div>

							<div class="pull-right course-infobox-price">

							</div>

						</div>

						<div class="clearfix course-infobox-footer">

							<div class="pull-right course-infobox-learned">{{renshu}}人学过</div>
						</div>

					</div>


					<div class="content">
						<ul class="nav nav-tabs" role="tablist">

							<li role="presentation" class="active">
								<a href="#labs" aria-controls="labs" role="tab" data-toggle="tab">课程详情</a>
							</li>

							<li role="presentation">
								<a @click="pinglun" href="#comments" class="stat-event" aria-controls="comments" role="tab" data-stat="course_comment"
								 data-toggle="tab">课程评价</a>
							</li>

						</ul>
						<div class="tab-content">

							<div role="tabpanel" class="tab-pane active" id="labs">
								<div class="lab-item ">
									<div class="lab-item-status">
										<img src="../img/lab-not-ok.png">
									</div>
									<div class="lab-item-index">课程概述</div>
									<h4><span>{{courDetails}}</span></h4>
								</div>

								<div class="lab-item ">
									<div class="lab-item-status">
										<img src="../img/lab-not-ok.png">
									</div>
									<div class="lab-item-index">授课目标</div>
									<h4> <span>
											{{courTarget}}
										</span>
									</h4>
								</div>



								<div class="lab-item ">
									<div class="lab-item-status">
										<img src="../img/lab-not-ok.png">
									</div>
									<div class="lab-item-index">预备知识</div>
									<h4><span>
											{{courPropaedeutics}}
										</span></h4>
								</div>

								<div class="lab-item ">
									<div class="lab-item-status">
										<img src="../img/lab-not-ok.png">
									</div>
									<div class="lab-item-index">参考资料</div>
									<h4><span>
											{{courResources}}
										</span></h4>
								</div>



							</div>
							<div role="tabpanel" class="tab-pane course-comment" id="comments">
								<div v-for="c in contents" class="tab-content" :data="contents.slice((currentPage-1)*pagesize,currentPage*pagesize)">
									<div role="tabpanel">
										<ul class="row question-items">
											<li class="question-item">
												<div class="col-md-10">
													<div class="col-sm-2 question-item-author">
														<div class="user-avatar ">
															<a class="avatar" href="../user/13/study.html" target="_blank">
																<img :src="c.photo">
															</a>
														</div>
													</div>
													<div class="col-sm-10">
														<h4>
															<samp v-text="c.content"></samp>
															<!-- <a class="question-item-title" href="show.html" target="_blank"> 实验楼百楼俱乐部成立，欢迎100楼的你加入！</a> -->
														</h4>
														<div class="question-item-summary">
															<div class="user-username ">
																<a class="avatar" href="../user/13/study.html" target="_blank">
																	<samp v-text="c.userName"></samp>
																</a>
																<!-- 	<span class="user-level">L14</span> -->
															</div>
															<span>发表于</span>
															<span class="question-item-date" v-text="c.mtime"></span>

															</span>
														</div>
													</div>
												</div>

												<div class="col-md-2 question-item-rank">
													<div v-if="c.isLike==true" style="color: #00b877">
														<div @click="dainzan(c.praise,c.mid)" style="cursor: pointer">
														<span class="glyphicon glyphicon-thumbs-up"></span>&nbsp;&nbsp;<span v-text="c.praise"></span>
														</div>
														<!--<div><span v-text="c.praise"></span></div>-->
													</div>
													<div v-else>
														<div @click="dainzan(c.praise,c.mid)"  style="cursor: pointer">
															<span class="glyphicon glyphicon-thumbs-up"></span>&nbsp;&nbsp;<span v-text="c.praise"></span>
														</div>
														<!--<div></span></div>-->
													</div>

												</div>


											</li>
										</ul>
									</div>
								</div>
								<!-- 分页条-->
								<el-pagination background layout="prev, pager, next" @current-change="again" :total="total">
								</el-pagination>
							</div>



							<div role="tabpanel" class="tab-pane" id="reports">
								<span class="lab-id active" data-lab-id="None">全部</span>

								<span class="lab-id" data-lab-id="1">第1节</span>

								<div class="report-owner">
									<span class="owner-list" data-user-id="">我的报告</span> / <span class="owner-list active" data-user-id="None">所有报告</span>
								</div>
								<div class="row report-items"></div>
								<div class="pagination-container"></div>
							</div>
							<div role="tabpanel" class="tab-pane" id="questions">
								<a class="btn btn-success" data-toggle="modal" data-target="#askquestion">我要提问</a>
								<hr>
								<ul class="row question-items"></ul>
								<div class="pagination-container"></div>
							</div>
						</div>
					</div>
				</div>

				<div class="col-md-3 layout-side">
					<div class="side-image side-image-pc">
						<img src="../img/ncn1.jpg?imageView2/0/h/300">
					</div>
					<div class="sidebox mooc-teacher">
						<div class="sidebox-header mooc-header">
							<h4 class="sidebox-title">课程教师</h4>
						</div>
						<div class="sidebox-body mooc-content">
							<a href="/user/20406" target="_blank">
								<img src="../img/Linux&c.png">
							</a>
							<div class="mooc-info">
								<div class="name"><strong>Edward</strong> </div>

								<div class="courses">共发布过<strong>18</strong>门课程</div>
							</div>
							<div class="mooc-extra-info">
								<div class="word long-paragraph">
									资深程序员，5年Linux运维、企业级开发经验及数据库实战和教学经验。
								</div>
							</div>
						</div>
						<div class="sidebox-footer mooc-footer">
							<a href="/teacher/20406" target="_blank">查看老师的所有课程 ></a>
						</div>
					</div>

					<div class="side-image">
						<a href="/vip" target="_blank">
							<img src="../img/banner-vip.png">
						</a>
					</div>

					<div class="sidebox adv-course">
						<div class="sidebox-header">
							<h4 class="sidebox-title">进阶课程</h4>
						</div>
						<div class="sideobx-body course-content">

							<a href="/courses/204">实用Linux Shell编程</a>

							<a href="/courses/2">Vim编辑器</a>

							<a href="/courses/68">Linux命令实例练习</a>

						</div>
					</div>




				</div>
			</div>
		</div>



		<div class="modal fade" id="charge-course-modal" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
						<h4 class="modal-title">课程报名</h4>
					</div>
					<div class="modal-body">
						<form class="row form-horizontal">
							<input name="_csrf_token" type=hidden value="1483794941##be4fb68b276c5f7cb970936cb25985cd53b943d1">
							<div class="form-group">
								<label class="col-md-2 control-label">邮箱</label>
								<div class="col-md-10">
									<input type="email" class="form-control" name="email" value="">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-2 control-label">手机号码</label>
								<div class="col-md-10">
									<div class="input-group">
										<input type="text" class="form-control" name="phone_no">
										<span class="input-group-btn">
											<button class="btn btn-default charge-course-phone-code" type="button" style="padding:7px 12px;">获取验证码</button>
										</span>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-2 control-label">验证码</label>
								<div class="col-md-10">
									<input type="text" class="form-control" name="verify_code">
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary charge-course-confirm">确定</button>
					</div>
				</div>
			</div>
		</div>


		<div class="modal fade" id="paid-modal" tabindex="-1" role="dialog">
			<div class="modal-dialog modal-sm" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" style="text-align:center;">支付确认</h4>
					</div>
					<div class="modal-body">
						<div class="row">
							<div class="col-md-6">
								<button class="btn btn-primary paid-confirm" type="button">支付成功</button>
							</div>
							<div class="col-md-6">
								<button class="btn btn-primary paid-method" type="button" style="background:none; color:#0c9">选择支付方式</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div id="base-data" data-flash="false" data-is-login=false data-is-jwt=true data-socket-url="wss://comet.xxxxxx.com"
		 data-msg-user="" data-msg-system=""></div>

		<script src="../app/dest/lib/lib.js?=2016121272249"></script>
		<script src="../static/jquery/2.2.4/jquery.min.js"></script>
		<script src="../static/ace/1.2.5/ace.js"></script>
		<script src="../static/aliyun/aliyun-oss-sdk-4.3.0.min.js"></script>
		<script src="../static/highlight.js/9.8.0/highlight.min.js"></script>
		<script src="../static/jspdf/1.2.61/jspdf.min.js"></script>
		<script src="../static/plupload/2.1.9/js/plupload.full.min.js"></script>
		<script src="../static/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script>
		<script src="../static/videojs/video.min.js"></script>
		<script src="../static/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js"></script>
		<script src="../static/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
		<script src="../static/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
		<script src="../static/bootstrap-table/1.11.0/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

		<script src="../static/ravenjs/3.7.0/raven.min.js"></script>
		<!-- <script>
			Raven.config('http://127.0.0.1:8060', {
				release: '3.12.13'
			}).install();
		</script> -->


		<div id="jinja-data" data-userlab-id="" data-course-id="1" data-is-authenticated="false" data-user-joined="false"
		 data-user-logined="false" data-show-student-info-modal="false" data-login-url="/login?next=%2Fcourses%2F1"
		 data-start-newlab-url="/courses/clear" data-faq="/faq" data-comment-post="/courses/1/comments" data-loginurl="/login?next=%2Fcourses%2F1"
		 data-site-type="0" data-report-post="/courses/1/reports" data-recomment-img="../img/recommentReport.png"
		 data-charge-course-phone-code="/user/sms/code" data-join-private-course="/courses/join" data-current-user-id=""
		 data-vip-icon="../img/vip-icon.png" data-vip-index="/vip" data-get-question-url="/courses/1/questions"
		 data-real-price="" data-query-bill="/purchase/bill/query" data-question-form="/questions/meta" data-qiniu-token-url="/api/qiniu/token"></div>
		<script src="../app/dest/course/labs.js?=2016121272249"></script>




		<!-- 页脚 -->
		<div class="width100 float_l padding_t30 height193">
			<div class="width_1200 margin_auto">
				<div class="width100 float_l text_c margin_b30">
					<a class="img_backg5" href="#"></a>
					<a class="img_backg6 posi_relative wexinmaxianshi" href="#"><i class="weixinweima dis_none"><img src="../../img/idx-btm.png"></i></a>
					<a class="img_backg7" href="#"></a>
					<a class="img_backg8" href="#"></a>
				</div>
				<div class="width100 float_l text_c yejiao color_gray">
					<a>关于我们</a>
					<a>企业合作</a>
					<a>人才招聘</a>
					<a>讲师招募</a>
					<a>联系我们</a>
					<a>意见反馈</a>
					<a>友情链接</a>
				</div>
				<div class="width100 float_l text_c border_t margin_t20 padding_t20 color_gray fon_siz12">
					<span>© 2016 imoroc.com 京ICP备13042132号</span>
				</div>
			</div>
		</div>

		<script>
			var menu = new Vue({
				el: "#details",
				mounted: function() {
					/*自动在请求中添加请求头*/
					var token = sessionStorage.getItem("access_token");
					console.log(token)
					
					if (token != null) {
						axios.defaults.headers.common['Authorization'] = "bearer " + token;
					}

					this.sid = sessionStorage.getItem("userid");
					this.getQueryString("courId");
					this.chaxun();
					this.people();
				},
				data: {
					//urlPre: "http://127.0.0.1:8060",
					courId: "",
					sid: "",
					//courId: "",
					courName: "",
					courTeaid: "",
					courDepid: "",
					courPicurl: "",
					courPrice: "",
					courNocount: "",
					courContent: "",
					courDetails: "",
					courPageview: "",
					courScore: "",
					courTarget: "",
					courResources: "",
					courPropaedeutics: "",
					courIsputaway: "",
					courCommentcount: "",
					courOpentime: "2018年10月13日 ~ 2019年01月31日",
					courClasshour: "3-5",
					renshu: "0",
					baoming: "立即参加",
					total: 50, //默认数据总数
					pagesize: 10, //每页的数据条数
					currentPage: 1, //默认开始页面
					contents: [],
					praise: '',
					cidlist: []

				},
				methods: {
					getQueryString: function(name) {
						var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
						var r = window.location.search.substr(1).match(reg);
						if (r != null) {
							this.courId = decodeURIComponent(r[2]);
							console.log("token=> bearer " + sessionStorage.getItem("access_token"));
							sessionStorage.setItem("courId", this.courId);
							console.log("存到sessionStorage里的数据:"+sessionStorage.getItem("courId"));
						}
						return '';
					},
					add1: function() {
						
						console.log(sessionStorage.getItem("access_token"))
						if (sessionStorage.getItem("access_token") != null && sessionStorage.getItem("access_token") !="") {
							if (this.baoming == "立即参加") {
								axios({
									method: 'post',
									url: `/api/student/studentPart/add`,
									params: {
										courId: this.courId,
										sid: this.sid,

									}
								}).then(res => {
									//http://localhost/ieppage/student/curricular/courses/show.html

									this.people();
									//this.courId = res.data;
									if (res.data.success == true) {
										this.baoming = res.data.message;

									} else {
										this.baoming = res.data.message;
									}
								})
							} else if (this.baoming = "进入学习") {
								window.location.href = "study.html?courId=" + this.courId+"&value=gonggao";
							}
						} else {
                            this.open();

						}

					}, open() {

                        this.$confirm('尊敬的用户,请先登录', '温情提示', {
                            confirmButtonText: '登录',
                            cancelButtonText: '取消',
                            type: 'warning',
                            center: true
                        }).then(() => {
                            window.location.href =
                                "\\login.html?callback-url=http://127.0.0.1/student/curricular/courses/show.html?courId=" + this.courId;
                        })
                    },
					chaxun: function() {

						axios({
							method: 'get',
							url: `/api/student/curricularTaxonomy/getCoursedetails`,
							params: {
								courId: this.courId
								//sid: this.sid,
							}
						}).then(res => {
							//http://localhost/ieppage/student/curricular/courses/show.html
							res = res.data[0];
							console.log(res);
							console.log(res.courContent);
							this.courName = res.courName;
							this.courPicurl = res.courPicurl;
							this.courContent = res.courContent;
							this.courDetails = res.courDetails;
							this.courTarget = res.courTarget;
							this.courResources = res.courResources;
							this.courPropaedeutics = res.courPropaedeutics;
							this.courPageview = res.courPageview;
							this.courOpentime = res.courOpentime;
							this.courClasshour = res.courClasshour;
							//1.未登录this.baoming显示立即参加
							//2.已登录未参加本门课程this.baoming显示立即参加
							//3.已登录已参加本门课程this.baoming显示进入学习
							if (sessionStorage.getItem("access_token") != "" && sessionStorage.getItem("access_token") != null) {

								axios({
									method: 'get',
									url: `/api/student/studentPart/query`,
									params: {
										sid: this.sid,

									}
								}).then(res => {
									this.cidlist = res.data;

									for (var i = 0; i < this.cidlist.length; i++) {

										//console.log("用户ID"+this.cidlist[i].cid);
										if (this.cidlist[i].cid == this.courId) {
											console.log("课程id" + this.cidlist[i].cid);
											return this.baoming = "进入学习";
										}

									}
								})
							}


						})
					},
					people: function() {
						axios({
							method: 'get',
							url: `/api/student/studentPart/querypeople`,
							params: {
								cid: this.courId
							}
						}).then(res => {
							//http://localhost/ieppage/student/curricular/courses/show.html
							res = res.data;
							this.renshu = res;
							console.log(res);


						})
					},
					pinglun: function() {
						axios({
							method: 'get',
							url: `/api/student/comment/queryCommentByCid`,
							params: {
								cid: this.courId,
								page: this.currentPage,
								size: this.pagesize,
								sid:this.sid
							}
						}).then(res => {
							res = res.data;
							this.contents = res.rows;
							this.total=res.total;

						})
					},
					again: function(currentPage) {
						this.currentPage = currentPage;
						this.pinglun();
					},
					dainzan: function(praise, mid) {
                        if (sessionStorage.getItem("access_token") != null && sessionStorage.getItem("access_token")!="") {
						axios({
							method: 'put',
							url: `/api/student/comment/updateComment`,
							params: {
								praise: praise,
								mid: mid,
								sid: this.sid
							},
						}).then(res => {
							console.log(res);
							this.pinglun();
						});
                        }else{
                            this.open();
						}
						console.log("1111");
					}
				}

			});
			
			var bt = new Vue({
				el: "#bt",
				mounted: function() {	
					var roleNames = sessionStorage.getItem("roleNames");
					if (roleNames != null && roleNames == ("学生")) {
						this.isShow = false;
						this.isCenter = true;
						this.userPhoto = sessionStorage.getItem("userPhoto");
					}
				},
				data: {
					isShow: true,
					isCenter: false,
					userPhoto: '',
					query:''
				},
				methods: {
					login: function() {
						window.location.href ="\\login.html?callback-url=http://127.0.0.1/student/curricular/courses/show.html";
					},
					tuichu: function() {
						sessionStorage.clear();
						localStorage.clear();
						window.location.href = "http://127.0.0.1/login.html";
					},
					shezhi:function(){
						window.location.href = "/student/curricular/user/13/personal.html";
					},
					search: function() {
						if (this.query == "") {
							this.$message.error('错了哦，请输入有效的搜索条件！');
							return;
						}
						sessionStorage.setItem("search_name", this.query);
						window.location.href = "/student/search.html"
					}
				}
			});	
				
		</script>




	</body>
</html>
